<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      width="900px"
      style="margin-top: 15vh"
      class="dialog"
      :visible="showDialog"
      @close="close"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <span>【题型】:{{ questionsInfo.questionType | questionsType }}</span>
        </el-col>
        <el-col :span="6">
          <span>【编号】:{{ questionsInfo.id }}</span>
        </el-col>
        <el-col :span="6">
          <span>【难度】:{{ questionsInfo.difficulty | degree }}</span>
        </el-col>
        <el-col :span="6">
          <span>【标签】:{{ questionsInfo.tags }}</span>
        </el-col>
        <el-col :span="6">
          <span>【学科】:{{ questionsInfo.subjectName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】:{{ questionsInfo.directoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】:{{ questionsInfo.direction }}</span>
        </el-col>
      </el-row>
      <el-divider />
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            【题干】:
            <p class="questionBlue" v-html="questionsInfo.question"></p>
            <div
              v-if="
                questionsInfo.questionType == '1' ||
                questionsInfo.questionType == '单选' ||
                questionsInfo.questionType == '2' ||
                questionsInfo.questionType == '多选'
              "
            >
              {{ questionsInfo.questionType | questionsType }}题
              选项：（以下选中的选项为正确答案）
            </div>
            <!-- 单选 -->
            <el-form
              v-if="
                questionsInfo.questionType == '1' ||
                questionsInfo.questionType == '单选'
              "
            >
              <div v-for="(item, index) in questionsInfo.options" :key="index">
                <el-form-item>
                  <el-radio-group v-model="item.isRight">
                    <el-radio :label="true">{{ item.title }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-form>
            <!-- 多选 -->
            <el-form
              v-if="
                questionsInfo.questionType == '2' ||
                questionsInfo.questionType == '多选'
              "
              style="margin-top: 20px"
            >
              <div
                class="mult"
                v-for="(item, index) in questionsInfo.options"
                :key="index"
              >
                <el-form-item>
                  <el-checkbox name="type" v-model="item.isRight"></el-checkbox>
                  <span style="padding-left: 10px">{{ item.title }}</span>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <span>【参考答案】：</span>
        <el-button type="danger" size="small" @click="isVideoShow = true"
          >答案视频解析</el-button
        >
        <div v-if="isVideoShow">
          <video
            :src="questionsInfo.videoURL"
            width="500px"
            controls="controls"
            autoplay
          ></video>
        </div>
      </el-row>
      <el-divider />
      <el-row>
        <div>
          【答案解析】:<span
            v-html="questionsInfo.answer"
            class="answsers"
          ></span>
        </div>
      </el-row>
      <el-divider />
      <el-row :span="24">
        <span>【题目备注】：{{ questionsInfo.remarks }}</span>
      </el-row>
      <span slot="footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  props: {
    showDialog: {
      trpe: Boolean,
      default: false
    }
  },
  data () {
    return {
      questionsInfo: [],
      isVideoShow: false
    }
  },
  methods: {
    close () {
      this.$emit('update:showDialog', false)
      this.isVideoShow = false
    },
    async detail (id) {
      const { data } = await detail({ id: id })
      console.log(data.options)
      data.options.forEach(item => {
        if (item.isRight == 1) {
          item.isRight = true
          return item
        }
      })
      this.questionsInfo = data
    }
  }
}
</script>

<style scoped lang='scss'>
.questionBlue {
  color: #0000ff;
}
::v-deep .el-form-item--medium {
  margin-bottom: 0;
}
::v-deep .el-divider {
  background-color: #9a9a9a;
}
::v-deep .el-divider--horizontal {
  margin: 12px 0;
  color: #9a9a9a;
}
.el-dialog__wrapper {
  ::v-deep .el-dialog__footer {
    padding-bottom: 10px;
    padding-right: 15px;
    text-align: right;
  }
}
.answsers {
  display: inline-block;
}
</style>
